import React, { useState } from 'react'
import { createStyles } from 'antd-style'
import {
  FolderOutlined,
  FolderOpenOutlined,
  FileImageOutlined,
  FileOutlined,
  CustomerServiceOutlined,
  PlayCircleOutlined,
  EllipsisOutlined,
  DeleteOutlined,
  SendOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons'
import { Layout, Menu, MenuProps, Progress } from 'antd'
import { computedFileSize } from '~/util'
import { useStoreSelector, useStoreDispatch } from '~/store'
import { setFileInfo } from '~/store/features/fileSlice'
import useIsMobile from '~/hooks/useIsMobile'
const SideBar: React.FC = () => {
  const { styles } = useStyles()
  const { folder, totalSize } = useStoreSelector((state) => state.file)
  const { userInfo, collapsed } = useStoreSelector((state) => state.user)
  const isMobile = useIsMobile()
  const menuItems: MenuProps['items'] = [
    {
      key: 'file',
      label: '我的文件',
      icon: <FolderOutlined />,
      children: [
        {
          key: '0',
          label: '全部',
          icon: <FolderOpenOutlined />
        },
        {
          key: '1',
          label: '图片',
          icon: <FileImageOutlined />
        },
        {
          key: '4',
          label: '文档',
          icon: <FileOutlined />
        },
        {
          key: '3',
          label: '音频',
          icon: <CustomerServiceOutlined />
        },
        {
          key: '2',
          label: '视频',
          icon: <PlayCircleOutlined />
        },
        {
          key: '5',
          label: '其它',
          icon: <EllipsisOutlined />
        }
      ]
    },
    {
      key: '6',
      label: '回收站',
      icon: <DeleteOutlined />
    },
    {
      key: '7',
      label: '我的分享',
      icon: <SendOutlined />
    }
  ]
  const dispatch = useStoreDispatch()
  function handleMenuClick(e: { key: string }) {
    const res = { ...folder }
    if (e.key === '6') {
      res.folderId = userInfo!.recycleBinId
    } else {
      res.folderId = userInfo!.folderId
    }
    dispatch(
      setFileInfo({
        ...res,
        typeId: Number(e.key)
      })
    )
  }
  return (
    <Layout.Sider
      className={styles.container}
      collapsible
      collapsed={collapsed}
      breakpoint='lg' // Adjust the breakpoint as needed
      trigger={null}
      style={{ display: isMobile && collapsed ? 'none' : 'block' }}
    >
      <div className={styles.menu}>
        <Menu
          mode='inline'
          items={menuItems}
          defaultOpenKeys={['file']}
          selectedKeys={[folder.typeId.toString()]}
          onClick={handleMenuClick}
        />
        {!collapsed ? (
          <div className={styles.capacity}>
            <Progress
              percent={Math.max(1, (totalSize / 500000000000) * 100)}
              showInfo={false}
              size='small'
            />
            <div className={styles.info}>{`${computedFileSize(
              totalSize
            )}/500G`}</div>
          </div>
        ) : (
          ''
        )}
      </div>
    </Layout.Sider>
  )
}

export default SideBar

const useStyles = createStyles(({ token, css }) => {
  return {
    container: css`
      &.ant-layout-sider {
        padding: 5px 0;
        background: ${token.colorBgContainer};
      }
      @media (max-width: 768px) {
        &.ant-layout-sider {
          position: fixed; /* 固定位置 */
          top: 70px;
          left: 0;
          height: calc(100% - 70px);
          width: 100% !important;
          max-width: 100% !important;
          z-index: 1000;
          padding: 0;
          background: rgba(136, 136, 136, 0.5);
        }
      }
    `,
    menu: css`
      @media (max-width: 768px) {
        width: 70%;
        height: 100%;
        position: relative;
        border-right: 1px solid #e8e8e8;
        background: ${token.colorBgContainer};
        &.ant-menu-light,
        .ant-menu-root,
        .ant-menu-inline {
          border-inline-end: none !important;
        }
      }
    `,
    capacity: css`
      position: absolute;
      width: 100%;
      bottom: 60px;
      padding: 0 24px;

      & .ant-progress-line {
        margin-bottom: 0;
      }
    `,
    info: css`
      padding: 0 10px;
      color: ${token.colorTextDescription};
    `
  }
})
